<template>
  <div ref="dom" id="reli"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  props:{
    datas:Object
    },
  data: function () {
    
    return {
      reli: "",
      options:{},
    };
  },
  mounted: function () {
    
        this.options = {
          title: {
            text: "仓库作物详情表",
            left: "9%",
          },
          tooltip: { position: "top" },
          grid: { height: "80%", top: "5%" },
          xAxis: {
            type: "category",
            data: this.datas.x,
            splitArea: {
              show: true,
            },
          },
          yAxis: {
            type: "category",
            data: this.datas.y,
            splitArea: {
              show: true,
            },
          },
          visualMap: {
            min: 0,
            max: 20,
            calculable: true,
            orient: "vertical",
            align: "top",
            itemHeight: "600",
            hoverLink: true,
            left: "left",
            bottom: "auto",
            inRange: {
              color: ["#ed4014", "#c5c8ce"],
            },
          },
          series: [
            {
              type: "heatmap",
              label: {
                show: true,
              },
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  // shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
              data: this.datas.data,
            },
          ],
        }
        this.reli = echarts.init(document.getElementById("reli"));
        this.reli.setOption(this.options);

  },
   watch:{
    datas:{
      handler(nd){
        this.options.xAxis.data=nd.x
        this.options.yAxis.data=nd.y
        this.options.series[0].data=nd.data;
       this.reli = echarts.init(document.getElementById("reli"));
        this.reli.setOption(this.options);
      },
      deep:true
    }
  }
};
</script>
<style>
#reli {
  width: 1600px;
  height: 750px;
  /* margin-left: 50px; */
}
</style>

